<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title><th:block th:text="${tilesetName}" /> Openlayers预览</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="/static/assets/openlayers/v9.2.4/ol.css" rel="stylesheet">
    <script src="/static/assets/openlayers/v9.2.4/ol.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script th:inline="javascript">
    const metaData = [[${metaData}]];
    const basePath = [[${basePath}]];
    const tiles = basePath + "/api/tilesets/" + [[${tilesetName}]] + "/{z}/{x}/{-y}." + metaData.format;

    const map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: tiles
                })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([104.330139, 30.734559]),
            zoom: 2,
            projection: 'EPSG:3857'
        }),
        target: 'map'
    });

    // var styleFunction = function(feature) {
    //     return new ol.style.Style({
    //         stroke: new ol.style.Stroke({
    //             color: feature.get('stroke'),//通过要素拿到具体的值
    //             width: 2,
    //             opacity: 1
    //         }),
    //         fill: new ol.style.Fill({
    //             color: "blue",
    //             opacity: feature.get('fill-opacity')
    //         }),
    //         text: new ol.style.Text({
    //             text: feature.get('name'),
    //             font: '12px bold serif',
    //             fill: new ol.style.Fill({
    //                 color: '#000'
    //             }),
    //             stroke: new ol.style.Stroke({
    //                 color: '#fff',
    //                 width: 2
    //             })
    //         })
    //     })
    // };
    //
    // let lineLayer = new ol.layer.Vector({
    //     title: 'add Layer',
    //     source: new ol.source.Vector({
    //         projection: 'EPSG:4326',
    //         url: "/static/China.json", //GeoJSON的文件路径，用户可以根据需求而改变
    //         format: new ol.format.GeoJSON()
    //     }),
    //     style: styleFunction
    // })
    // map.addLayer(lineLayer);
</script>
</body>

</html>